<!--
 * @Author: “Jackson” “1145239633@qq.com”
 * @Date: 2025-07-22 11:50:31
 * @LastEditors: “Jackson” “1145239633@qq.com”
 * @LastEditTime: 2025-09-23 15:05:20
 * @FilePath: \shaangu-web\src\views\file\fileManage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <splitpanes class="default-theme" :horizontal="this.$store.getters.device === 'mobile'">
        <pane size="16">
          <el-col>
            <div class="head-container">
              <el-input v-model="deptName" placeholder="请输入文件分类" clearable size="small" prefix-icon="el-icon-search"
                style="margin-bottom: 20px" />
            </div>
            <div class="head-container">
              <el-tree ref="tree" node-key="id" :filter-node-method="filterNode" default-expand-all highlight-current
                :data="dataTrees" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
          </el-col>
        </pane>
        <pane size="84">
          <el-col>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
              label-width="68px">
              <el-form-item label="文件名" prop="fileName">
                <el-input v-model="queryParams.fileName" placeholder="请输入文件名" clearable
                  @keyup.enter.native="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                  v-hasPermi="['product:productFile:add']">新增</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table stripe border v-loading="loading" :data="productFileList"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" align="center" prop="id" width="55" type="index" />

              <el-table-column label="文件名" align="center" key="fileName" prop="fileName" min-width="250"
                show-overflow-tooltip />
              <!-- <el-table-column label="文件存储路径" align="center" prop="filePath" /> -->
              <!-- <el-table-column label="所属分类ID" align="center" prop="categoryId" /> -->
              <el-table-column label="分类名称" align="center" key="categoryName" prop="categoryName" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="上传人" align="center" key="uploadUser" prop="uploadUser" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="上传时间" align="center" key="uploadTime" prop="uploadTime" width="150">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.uploadTime, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>
              <el-table-column label="图号" v-if="queryParams.categoryId != 1" key="drawingNumber" align="center"
                prop="drawingNumber" min-width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div style="color: #0275cd;cursor: pointer" @click="clickDrawingNumber(scope.row.projectId)">{{
                    scope.row.drawingNumber }}</div>
                </template>
              </el-table-column>
              <el-table-column label="项目名称" v-if="queryParams.categoryId != 1" key="projectName" align="center"
                prop="projectName" min-width="150" show-overflow-tooltip />
              <el-table-column label="用户" v-if="queryParams.categoryId != 1" key="userName" align="center"
                prop="userName" min-width="150" show-overflow-tooltip />
              <el-table-column label="图号数量" v-if="queryParams.categoryId == 1" key="number" align="center" prop="number"
                min-width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div style="color: #0275cd;  cursor: pointer" @click="clickNumber(scope.row)">{{ scope.row.number }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="remark" key="remark" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                width="160">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                    v-hasPermi="['product:productFile:edit']">修改</el-button>
                  <el-button size="mini" type="text" @click="handlePreview(scope.row)"
                    v-hasPermi="['product:productFile:preview']">预览</el-button>
                  <el-button size="mini" type="text" @click="handleExport(scope.row.filePath)"
                    v-hasPermi="['product:productFile:export']">下载</el-button>
                  <el-button size="mini" type="text" @click="handleDelete(scope.row)"
                    v-hasPermi="['product:productFile:remove']">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList" />
          </el-col>
        </pane>
      </splitpanes>
    </el-row>



    <!-- 添加或修改产品文件信息对话框 -->
    <!-- <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="关联项目ID" prop="projectId">
          <el-input v-model="form.projectId" placeholder="请输入关联项目ID" />
        </el-form-item>
        <el-form-item label="文件名" prop="fileName">
          <el-input v-model="form.fileName" placeholder="请输入文件名" />
        </el-form-item>
        <el-form-item label="文件存储路径" prop="filePath">
          <el-input
            v-model="form.filePath"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="所属分类ID" prop="categoryId">
          <el-input v-model="form.categoryId" placeholder="请输入所属分类ID" />
        </el-form-item>
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="上传人" prop="uploadUser">
          <el-input v-model="form.uploadUser" placeholder="请输入上传人" />
        </el-form-item>
        <el-form-item label="上传时间" prop="uploadTime">
          <el-date-picker
            clearable
            v-model="form.uploadTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择上传时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->

    <el-dialog title="在线预览" v-dialogDrag :visible.sync="openPreview" width="900px" append-to-body>
      <div style="display: flex;justify-content: flex-end;margin: 10px;">
        <el-button @click="handleExport(fileUrl)" size="mini" type="primary">下载</el-button>
      </div>
      <PdfViewer v-if="fileType === 'pdf' && fileUrl" :fileUrl="fileUrl" @loading="handleLoading"
        @error="handleError" />

      <DocxViewer v-else-if="fileType === 'docx' && fileUrl" :fileUrl="fileUrl" @loading="handleLoading"
        @error="handleError" />

      <ExcelViewer v-else-if="fileType === 'xlsx' && fileUrl" :fileUrl="fileUrl" @loading="handleLoading"
        @error="handleError" />

      <el-image v-else-if="fileType === 'png' || fileType === 'jpg' || fileType === 'jpeg'"
        style=" width: 100px; height: 100px" :src="fileUrl" :preview-src-list="[fileUrl]">
      </el-image>
    </el-dialog>

    <el-dialog v-dialogDrag :close-on-click-modal="false" title="附件" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="文件类型" prop="categoryId">
          <el-select v-model="form.categoryId" @change="selectName">
            <el-option v-for="item in categoryDatas" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="附件上传">
          <file-upload @input="inputUrl" v-model="fileList" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>




    <el-dialog title="详情" v-dialogDrag :visible.sync="openDetail" width="940px" append-to-body
      :close-on-click-modal="false">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="通用类" name="first"></el-tab-pane>
        <el-tab-pane label="气动类" name="second"></el-tab-pane>
        <el-tab-pane label="结构类" name="third"></el-tab-pane>
        <el-tab-pane label="文件事故类" name="forth"></el-tab-pane>
        <el-tab-pane label="其余字段" name="fifth"></el-tab-pane>
        <el-form ref="formDetail" :model="formDetail" label-width="140px" class="addDatas" :inline="true">
          <div v-if="activeName == 'first'">
            <el-form-item label="图号" prop="drawingNumber">
              <el-input disabled    v-model="formDetail.drawingNumber" placeholder="请输入图号" />
            </el-form-item>
            <el-form-item label="任务号" prop="taskNumber">
              <el-input disabled v-model="formDetail.taskNumber" placeholder="请输入任务号" />
            </el-form-item>
            <el-form-item label="总成号" prop="assemblyNumber">
              <el-input disabled v-model="formDetail.assemblyNumber" placeholder="请输入总成号" />
            </el-form-item>
            <el-form-item label="用户" prop="userName">
              <el-input disabled v-model="formDetail.userName" placeholder="请输入用户" />
            </el-form-item>
            <el-form-item label="项目名称" prop="projectName">
              <el-input disabled v-model="formDetail.projectName" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="项目类别" prop="category">
              <el-select disabled v-model="formDetail.category" placeholder="请选择项目类别">
                <el-option v-for="dict in utilitytypeList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="装置规模" prop="deviceScale">
              <el-select disabled v-model="formDetail.deviceScale" placeholder="请选择装置规模">
                <el-option v-for="dict in utilityscaleList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机组布置方式" prop="unitLayout">
              <el-select disabled v-model="formDetail.unitLayout" placeholder="请选择机组布置方式">
                <el-option v-for="dict in utilityunitList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工质" prop="productMedium">
              <el-input disabled v-model="formDetail.productMedium" placeholder="请输入工质" />
            </el-form-item>
            <el-form-item label="转速r/min" prop="speedRpm">
              <el-input disabled v-model="formDetail.speedRpm" placeholder="请输入转速r/min" />
            </el-form-item>
            <el-form-item label="机型" prop="productModel">
              <el-input disabled v-model="formDetail.productModel" placeholder="请输入机型" />
            </el-form-item>
            <el-form-item label="产品级数" prop="productStageCount">
              <el-input disabled v-model="formDetail.productStageCount" placeholder="请输入产品级数" />
            </el-form-item>


            <el-form-item label="驱动机功率" prop="driverPower">
              <el-input disabled v-model="formDetail.driverPower" placeholder="请输入驱动机功率" />
            </el-form-item>
          </div>
          <div v-if="activeName == 'second'">
            <el-form-item label="计算文件名" prop="calcFile">
              <el-input disabled v-model="formDetail.calcFile" placeholder="请输入计算文件名" />
            </el-form-item>
            <el-form-item label="流道高度(mm)" prop="flowPathHeight">
              <el-input disabled v-model="formDetail.flowPathHeight" placeholder="请输入流道高度(mm)" />
            </el-form-item>

            <el-form-item label="最大流量(Nm3/min)" prop="maxFlow">
              <el-input disabled v-model="formDetail.maxFlow" placeholder="请输入最大流量(Nm3/min)" />
            </el-form-item>
            <el-form-item label="最小流量(Nm3/min)" prop="minFlow">
              <el-input disabled v-model="formDetail.minFlow" placeholder="请输入最小流量(Nm3/min)" />
            </el-form-item>

            <el-form-item label="启动角度(°)" prop="startupAngle">
              <el-input disabled v-model="formDetail.startupAngle" placeholder="请输入启动角度(°)" />
            </el-form-item>
            <el-form-item label="安全运行角(°)" prop="safeOperatingAngle">
              <el-input disabled v-model="formDetail.safeOperatingAngle" placeholder="请输入安全运行角(°)" />
            </el-form-item>
            <el-form-item label="长期最小运行角(°)" prop="longTermMinOperatingAngle">
              <el-input disabled v-model="formDetail.longTermMinOperatingAngle" placeholder="请输入长期最小运行角(°)" />
            </el-form-item>
            <el-form-item label="最大静叶角度(°)" prop="maxStaticBladeAngle">
              <el-input disabled v-model="formDetail.maxStaticBladeAngle" placeholder="请输入最大静叶角度(°)" />
            </el-form-item>
            <el-form-item label="启动内功率（kW)" prop="startupInternalPower">
              <el-input disabled v-model="formDetail.startupInternalPower" placeholder="请输入启动内功率（kW)" />
            </el-form-item>
            <div class="addData">
              <div class="title">工况点(理论)</div>
              <!-- <el-button type="primary" @click="addTheoretical" size="mini" class="add-btn">新 增</el-button> -->
            </div>
            <el-table :data="formDetail.tworkingConditionTheoreticalList" border max-height="300">
              <el-table-column label="	工况名称" align="center" prop="conditionName" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="进口态流量 m3/min" align="center" prop="inletVolumeM3Min" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="标态流量 Nm3/min" align="center" prop="standardVolumeNm3Min" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="进气法兰处压力 pj bar(a)" align="center" prop="inletPressurePjBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="进气温度 Tj ℃" align="center" prop="inletTemperatureTj" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="相对湿度 %" align="center" prop="humidityPercent" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="排气法兰处压力 bar(a)" align="center" prop="outletPressureBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="排气温度 ℃" align="center" prop="outletTemperature" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="	静叶角度 °" align="center" prop="statorBladeAngle" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="多变效率 %" align="center" prop="polytropicEfficiency" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="内功率 kW" align="center" prop="internalPowerKw" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="工作转速 r/min" align="center" prop="rotationSpeedRpm" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip />

            </el-table>

            <div class="addData">
              <div class="title">工况点(实际)</div>
              <!-- <el-button type="primary" @click="addActual" size="mini" class="add-btn">新 增</el-button> -->
            </div>
            <el-table :data="formDetail.tworkingConditionActualList" border max-height="300">
              <el-table-column label="时间点" align="center" prop="conditionName" min-width="150" show-overflow-tooltip />
              <el-table-column label="标态流量 Nm3/min" align="center" prop="standardVolumeNm3Min" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="进气法兰处压力 pj bar(a)" align="center" prop="inletPressurePjBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="进气温度 Tj ℃" align="center" prop="inletTemperatureTj" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="排气法兰处压力 bar(a)" align="center" prop="outletPressureBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="排气温度 ℃" align="center" prop="outletTemperature" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="	静叶角度 °" align="center" prop="statorBladeAngle" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="工作转速 r/min" align="center" prop="rotationSpeedRpm" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="采集人" align="center" prop="collector" min-width="150" show-overflow-tooltip />
              <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip />

            </el-table>
          </div>
          <div v-if="activeName == 'third'">
            <el-form-item label="轴承跨距(mm)" prop="spindleSpan">
              <el-input disabled v-model="formDetail.spindleSpan" placeholder="请输入轴承跨距(mm)" />
            </el-form-item>
            <el-form-item label="主轴连接" prop="spindleConnection">
              <el-select disabled v-model="formDetail.spindleConnection" placeholder="请选择主轴连接">
                <el-option v-for="dict in structuralspindleList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预留级" prop="reservedStage">
              <el-select disabled v-model="formDetail.reservedStage">
                <el-option v-for="(item, index) in reservedStageList" :key="index" :value="item.name"
                  :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支承轴承图号" prop="supportBearingDrawing">
              <el-input disabled v-model="formDetail.supportBearingDrawing" placeholder="请输入支承轴承图号" />
            </el-form-item>
            <el-form-item label="支承轴承直径(mm)" prop="supportBearingDiameter">
              <el-input disabled v-model="formDetail.supportBearingDiameter" placeholder="请输入支承轴承直径(mm)" />
            </el-form-item>
            <el-form-item label="推力轴承图号" prop="thrustBearingDrawing">
              <el-input disabled v-model="formDetail.thrustBearingDrawing" placeholder="请输入推力轴承图号" />
            </el-form-item>
            <el-form-item label="推力轴承位置" prop="thrustBearingPosition">
              <el-select disabled v-model="formDetail.thrustBearingPosition" placeholder="请选择推力轴承位置">
                <el-option v-for="dict in structuralchassisList" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="推力轴承直径(mm)" prop="thrustBearingDiameter">
              <el-input disabled v-model="formDetail.thrustBearingDiameter" placeholder="请输入推力轴承直径 (mm)" />
            </el-form-item>
            <el-form-item label="机壳固定点" prop="casingFixedPoint">
              <el-select disabled v-model="formDetail.casingFixedPoint" placeholder="请选择机壳固定点">
                <el-option v-for="dict in structuralchassisList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调节缸驱动形式" prop="adjustingCylinderDriveType">
              <el-select disabled v-model="formDetail.adjustingCylinderDriveType" placeholder="请选择调节缸驱动形式">
                <el-option v-for="dict in structuraldriveList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="底座号" prop="baseNumber">
              <el-input disabled v-model="formDetail.baseNumber" placeholder="请输入底座号" />
            </el-form-item>
            <el-form-item label="机壳图号" prop="casing">
              <el-input disabled v-model="formDetail.casing" placeholder="请输入机壳图号" />
            </el-form-item>
            <el-form-item label="进出口型式" prop="inletOutletType">
              <el-select disabled v-model="formDetail.inletOutletType" placeholder="请选择进出口型式">
                <el-option v-for="dict in structuralexportList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="机壳型式" prop="casingType">
              <el-select disabled v-model="formDetail.casingType" placeholder="请选择机壳型式">
                <el-option v-for="dict in structuralenclosureList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="轮毂直径 (mm)" prop="hubDiameter">
              <el-input disabled v-model="formDetail.hubDiameter" placeholder="请输入轮毂直径(mm)" />
            </el-form-item>
            <el-form-item label="叶根型式" prop="bladeRootType">
              <el-select disabled v-model="formDetail.bladeRootType" placeholder="请选择叶根型式">
                <el-option v-for="dict in structuralfixingList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出口流道高度 (mm)" prop="outletChannelHeight">
              <el-input disabled v-model="formDetail.outletChannelHeight" placeholder="请输入出口流道高度 (mm)" />
            </el-form-item>

            <el-form-item label="静叶调节范围" prop="staticBladeAdjustRange">
              <el-select disabled v-model="formDetail.staticBladeAdjustRange" placeholder="请选择静叶调节范围">
                <el-option v-for="dict in structuralbladeList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="activeName == 'forth'">
            <el-form-item label="是否事故" prop="accidentFlag">
              <el-select disabled v-model="formDetail.accidentFlag" placeholder="请选择">
                <el-option v-for="dict in accidentFlagList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事故报告名称" prop="accidentReport">
              <el-input disabled v-model="formDetail.accidentReport" placeholder="请输入事故报告名称" />
            </el-form-item>
          </div>
          <div v-if="activeName == 'fifth'">
            <el-form-item v-for="item in remarkFields" :key="item.field" :label="item.label" :prop="item.field">
              <el-input disabled v-model="formDetail[item.field]" :placeholder="'请输入' + item.label" />
            </el-form-item>
          </div>
        </el-form>
      </el-tabs>
    </el-dialog>


    <el-dialog title="关联产品" v-dialogDrag :visible.sync="openProducts" width="1150px" append-to-body>
      <el-table :data="productLists" stripe border  max-height="500">
        <el-table-column label="序号" align="center" width="55" type="index" />
        <el-table-column label="图号" align="center" prop="drawingNumber" min-width="150" show-overflow-tooltip >
         <template slot-scope="scope">
                  <div style="color: #0275cd;cursor: pointer" @click="clickDrawingNumber(scope.row.id)">{{
                    scope.row.drawingNumber }}</div>
                </template>
        </el-table-column>

        <el-table-column label="用户" align="center" prop="userName" min-width="150" show-overflow-tooltip />
        <el-table-column label="项目名称" align="center" prop="projectName" min-width="150" show-overflow-tooltip />
        <el-table-column label="机组布置方式" align="center" prop="unitLayout" min-width="150" show-overflow-tooltip />
        <el-table-column label="项目类别" align="center" prop="category" min-width="150" show-overflow-tooltip />
        <el-table-column label="机型" align="center" prop="productModel" min-width="150" show-overflow-tooltip />
        <el-table-column label="产品级数" align="center" prop="productStageCount" min-width="150" show-overflow-tooltip />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProductFile,
  listProductFile1,
  getProductFile,
  delProductFile,
  addProductFile,
  updateProductFile,
} from "@/api/file/fileManage";
import { categoryList, dictList } from "@/api/select";
import PdfViewer from "@/views/components/PdfViewer.vue";
import DocxViewer from "@/views/components/DocxViewer.vue";
import ExcelViewer from "@/views/components/ExcelViewer.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { fieldMap } from "@/api/system/roleSetting";
import {
  getProductInfo,listProductInfo
} from "@/api/product/productInfo";
// 提取公共处理函数
const processDictData = (rows) => {
  return rows.map((item) => ({
    ...item,
    value: item.dictValue,
    label: item.dictLabel,
  }));
};
export default {
  name: "ProductFile",
  components: { PdfViewer, DocxViewer, ExcelViewer, Treeselect, Splitpanes, Pane },
  data() {
    return {
      productLists: [],
      openProducts: false,
      remarkFields: [],
      utilitymodelList: [],
      utilityfigureList: [],
      utilitytaskList: [],
      utilitytypeList: [],
      utilityscaleList: [],
      utilityunitList: [],
      structuralspindleList: [],
      structuralchassisList: [],
      structuraldriveList: [],
      structuralbladeList: [],
      structuralexportList: [],
      structuralenclosureList: [],
      structuralfixingList: [],
      reservedStageList: [
        {
          name: "有",
          value: "有",
          label: "有",
        },
        {
          name: "无",
          value: "无",
          label: "无",
        },
      ],
      accidentFlagList: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 2,
          label: "否",
        },
      ],
      activeName: 'first',
      formDetail: {},
      openDetail: false,
      dataTrees: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      deptName: '',
      fileList: [],
      typeFileLists: [],
      fileUrl: "",
      fileType: "docx",
      loadings: false,
      errors: "",
      openPreview: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品文件信息表格数据
      productFileList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        fileName: null,
        filePath: null,
        categoryId: null,
        categoryName: null,
        uploadUser: null,
        uploadTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        fileName: [
          { required: true, message: "文件名不能为空", trigger: "blur" },
        ],
        filePath: [
          { required: true, message: "文件存储路径不能为空", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "文件类型不能为空", trigger: "blur" },
        ],
      },
      categoryDatas: [],
    };
  },
  created() {
    this.selectfileName = localStorage.getItem("fileName");
    this.getList();
    categoryList().then((res) => {
      this.categoryDatas = res.rows;
      this.categoryDatas.forEach(element => {
        element.label = element.name
      });

      this.dataTrees = [{
        id: 1,
        label: '文件分类',
        children: this.categoryDatas
      }]

      // 新增：默认选中第一个分类节点
      this.$nextTick(() => {
        if (this.categoryDatas && this.categoryDatas.length > 0) {
          const firstCategory = this.categoryDatas[0];
          // 设置树组件当前选中节点
          this.$refs.tree.setCurrentKey(firstCategory.id);
          // 触发节点点击事件的处理逻辑
          this.handleNodeClick(firstCategory);
        }
      });
    });

    fieldMap().then((res) => {
      const remarkFields = res.rows.filter(
        (item) => item.field && item.field.toLowerCase().includes("remark")
      );
      this.remarkFields = remarkFields;
    });
    // 并行请求字典数据
    Promise.all([
      dictList({ dictType: "utilitymodel" }),
      dictList({ dictType: "utilitytype" }),
      dictList({ dictType: "utilityscale" }),
      dictList({ dictType: "utilityunit" }),
      dictList({ dictType: "structuralspindle" }),
      dictList({ dictType: "structuralchassis" }),
      dictList({ dictType: "structuraldrive" }),
      dictList({ dictType: "structuralblade" }),
      dictList({ dictType: "structuralexport" }),
      dictList({ dictType: "structuralenclosure" }),
      dictList({ dictType: "structuralfixing" }),
    ]).then(
      ([
        utilitymodelRes,
        utilitytypeRes,
        utilityscaleRes,
        utilityunitRes,
        structuralspindleRes,
        structuralchassisRes,
        structuraldriveRes,
        structuralbladeRes,
        structuralexportRes,
        structuralenclosureRes,
        structuralfixingRes,
      ]) => {
        this.utilitymodelList = processDictData(utilitymodelRes.rows);
        this.utilitytypeList = processDictData(utilitytypeRes.rows);
        this.utilityscaleList = processDictData(utilityscaleRes.rows);
        this.utilityunitList = processDictData(utilityunitRes.rows);
        this.structuralspindleList = processDictData(structuralspindleRes.rows);
        this.structuralchassisList = processDictData(structuralchassisRes.rows);
        this.structuraldriveList = processDictData(structuraldriveRes.rows);
        this.structuralbladeList = processDictData(structuralbladeRes.rows);
        this.structuralexportList = processDictData(structuralexportRes.rows);
        this.structuralenclosureList = processDictData(
          structuralenclosureRes.rows
        );
        this.structuralfixingList = processDictData(structuralfixingRes.rows);
        this.getList();
      }
    );
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    clickNumber(row) {
       listProductInfo({calcFile:row.fileName,pageNum: 1,pageSize: 10000}).then(res=>{
           this.productLists = res.rows
           this.openProducts = true
       })
    },
    clickDrawingNumber(projectId) {
      this.activeName = 'first'
      getProductInfo(projectId).then((response) => {
        this.formDetail = response.data;
        this.formDetail.tworkingConditionTheoreticalList = this.formDetail
          .tworkingConditionTheoreticalList
          ? this.formDetail.tworkingConditionTheoreticalList
          : [];
        this.formDetail.tworkingConditionActualList = this.formDetail
          .tworkingConditionActualList
          ? this.formDetail.tworkingConditionActualList
          : [];
        this.openDetail = true;
      });
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.queryParams.categoryId = data.id;
      this.handleQuery();
    },
    inputUrl(data) {
      this.fileList = data
      this.form.fileName = data[0].name
      this.form.filePath = data[0].url
    },
    selectName(e) {
      this.form.categoryName = this.categoryDatas.find(
        (item) => item.id == e
      ).name;
    },
    handlePreview(row) {
      this.fileUrl = row.filePath;
      const extension = this.fileUrl.split(".").pop().toLowerCase();
      this.fileType = extension;
      console.log(this.fileType)
      this.openPreview = true;
    },
    handleLoading(loading) {
      this.loadings = loading;
      this.$emit("loading", loading);
    },
    handleError(error) {
      this.errors = error;
      this.$emit("error", error);
    },
    handleExport(filePath) {
      window.open(filePath);
      // const fileUrl = this.baseUrl + row.filePath;
      // const link = document.createElement("a");
      // link.href = fileUrl;
      // link.download = row.fileName;
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
    },
    /** 查询产品文件信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.categoryIds = this.selectfileName.split(",");
      listProductFile1(this.queryParams).then((response) => {
        this.productFileList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        projectId: null,
        fileType: "",
        fileName: null,
        filePath: null,
        categoryId: null,
        categoryName: null,
        uploadUser: null,
        uploadTime: null,
        remark: null,
      };
      this.fileList = []
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加产品文件信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getProductFile(id).then((response) => {
        this.form = response.data;
        this.fileList = [
          {
            name: this.form.fileName,
            url: this.form.filePath
          }
        ]
        this.open = true;
        this.title = "修改产品文件信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {

          if (this.form.id != null) {
            updateProductFile(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProductFile(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除产品文件信息数据项？")
        .then(function () {
          return delProductFile(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table .table-header-center {
  text-align: center;

  .cell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
}

.header-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;

  >span {
    margin-right: 6px;
  }

  .filter-icon {
    font-size: 14px;
    color: #c0c4cc;
    transition: all 0.3s;

    &.active-filter {
      color: #0275cd;
    }
  }

  &:hover .filter-icon {
    color: #0275cd;
  }
}

.filter-content {
  padding: 10px;

  >div {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .filter-footer {
    margin-top: 10px;
    text-align: right;
  }
}

.active-filters {
  margin-bottom: 15px;
  padding: 12px;
  background-color: #f8fbff;
  border-radius: 4px;
  border: 1px solid #f8fbff;

  .filter-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    >span {
      font-size: 14px;
      color: #606266;
    }

    .el-tag {
      margin-right: 8px;
    }

    .el-button {
      margin-left: 10px;
    }
  }
}

::v-deep .el-table {
  th {
    background-color: #f8f8f9;
  }

  td {
    padding: 8px 0;
  }

  .el-table__body-wrapper {
    overflow-x: auto;
  }
}

.custom-popover {
  z-index: 9999 !important;
  position: fixed !important;
}

::v-deep .custom-popover {
  z-index: 9999 !important;
}

::v-deep .el-select-dropdown {
  z-index: 9999 !important;
}

::v-deep .el-tabs__content {
  .el-input {
    width: 280px !important;
  }
}

::v-deep .addDatas {
  .el-input {
    width: 280px !important;
  }
}

.footers {
  text-align: right;
  margin-top: 20px;
}

.addData {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
  margin: 20px 0;
  width: 100%;

  /* 改为 100% 或移除固定宽度 */
  .title {
    font-weight: bold;
    margin-left: 5px;
    border-left: 4px solid #0275cd;
    padding-left: 10px;
  }

  .add-btn {
    /* 强制覆盖可能的全局样式 */
    padding: 7px 15px !important;
    font-size: 12px !important;
  }
}
</style>
